<template>
	<div class="person">
		<!--头部-->
		<myheader></myheader>
		<!--登录/注册-->
		<div class="login">
			<div class="loginicon">
				<img src="../../../static/wfy/mine_head.png" />
			</div>
			<div class="loginreset" v-if="flag">
				<router-link to="/user">登录</router-link>
				<router-link to="/user/regster">注册</router-link>
			</div>
			<div class="loginreset" v-else>
				<p>欢迎您，{{username}}</p>
			</div>
		</div>
		<!--列表-->
		<ul class="page_list">
			<li>
				<router-link to="/favorhouse">
					<div>
						<p class="bgicon bg1"></p>
						<p>我关注的房源</p>
					</div>
					<span class="into"></span>
				</router-link>
			</li>
			<li>
				<router-link to="/favorcommunity">
					<div>
						<p class="bgicon bg2"></p>
						<p>我关注的小区</p>
					</div>
					<span class="into"></span>
				</router-link>
			</li>
			<li>
				<router-link to="/favornewhouse">
					<div>
						<p class="bgicon bg3"></p>
						<p>我关注的新房</p>
					</div>
					<span class="into"></span>
				</router-link>
			</li>
			<li>
				<router-link to="/houselist">
					<div>
						<p class="bgicon bg1"></p>
						<p>我关注的租房</p>
					</div>
					<span class="into"></span>
				</router-link>
			</li>
			<li>
				<router-link to="/coupon">
					<div>
						<p class="bgicon bg5"></p>
						<p>我的租房优惠券</p>
					</div>
					<span class="into"></span>
				</router-link>
			</li>
		</ul>
		<div class="logout" v-if="!flag" @click="signout">退出登录</div>
		
		
		<div id="">
			
		</div>

	</div>
</template>
<script>
	import myheader from '@/components/public/myheader'
	export default {
		name: 'person',
		data() {
			
			return {
				flag: false,
				username: "176***48",
				usericon: {
					avatar: '../../../assets/yc/mine_head.png'
				}
			}
		},
		mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				var id=localStorage.getItem("nameid");
				var datax = {
					id:id
										
				}
				var _this=this;
				_this.axios.post(_this.ajaxUrl+'/api/user/selectname',_this.qs.stringify(datax)).then(function(res){
					_this.username=res.data.user_name;
				}).catch(function(err){
					
				});
			}
		},
		components: {
			myheader
		},
		methods:{
			signout(){
			localStorage.clear();
			this.$router.push({
				name:'home'
			});
			}
		}
	}
</script>

<style scoped="scoped">
	.login {
		width: 100%;
		height: 4.97rem;
		background: #4371fb;
		padding: 1rem 0;
		box-sizing: border-box;
	}
	
	.loginicon {
		width: 1.34rem;
		height: 1.34rem;
		overflow: hidden;
		margin: auto;
	}
	
	.loginicon img {
		width: 1.34rem;
		height: 1.34rem;
		border-radius: 50%;
	}
	
	.loginreset {
		margin-top: 0.55rem;
		display: flex;
		justify-content: center;
		color: #fff;
	}
	
	.loginreset>a {
		box-shadow: 0 0 3px #fff;
		display: inline-block;
		width: 1.8rem;
		height: 0.7rem;
		border: 1px solid #5981fa;
		line-height: 0.75rem;
		margin: 0 .15rem;
		border-radius: 2px;
		text-align: center;
		color: #fff;
		font-size: 0.33rem;
	}
	
	.page_list {
		padding: 0;
		margin-top: 0.3rem;
		background-color: #fff;
		border-top: 1px solid #E4E6F0;
		border-bottom: 1px solid #E4E6F0;
	}
	
	.page_list ul {
		list-style: none;
	}
	
	.page_list li {
		margin: 0.35rem 0 0 1rem;
		padding-bottom: 0.3rem;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		color: #000;
		border-bottom: 1px solid #e2e2e2;
	}
	
	.page_list li>a {
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: 0.3rem;
		color: #000;
	}
	
	.page_list li:last-of-type {
		border-bottom: transparent;
	}
	
	.page_list li .into {
		display: inline-block;
		width: 0.36rem;
		height: 0.36rem;
		background: url(../../../static/wfy/back1.png) no-repeat left center;
		background-size: 0.16rem 0.3rem;
		padding-right: 0.3rem;
	}
	
	.page_list li div {
		position: relative;
	}
	
	.page_list li div .bgicon {
		position: absolute;
		width: 0.40rem;
		height: 0.40rem;
		left: -0.6rem;
	}
	
	.page_list .bgicon.bg1 {
		background: url(../../../static/wfy/collection_01.png) no-repeat left center;
		background-size: 0.35rem;
	}
	
	.page_list .bgicon.bg2 {
		background: url(../../../static/wfy/collection_02.png) no-repeat left center;
		background-size: 0.35rem;
	}
	
	.page_list .bgicon.bg3 {
		background: url(../../../static/wfy/collection_03.png) no-repeat left center;
		background-size: 0.35rem;
	}
	
	.page_list .bgicon.bg5 {
		background: url(../../../static/wfy/collection_04.png) no-repeat left center;
		background-size: 0.35rem;
	}
	
	.logout {
		display: block;
		margin: 1rem 0.2rem;
		text-align: center;
		background-color: #fff;
		border: 1px solid #c5c5c5;
		height: 0.98rem;
		line-height: 1rem;
		font-size: 0.31rem;
		margin-bottom: 3rem;
	}
</style>